<template>
	<view class="container">
		<view class="gradient" :style="[{ 'padding-top': topH + 'px' }]">
			<image :src="theme?.bg?.index" class="top-bg"></image>

			<view class="search flex mx-30 items-center" :style="[{ 'margin-right': searchr + 'px' }]" @click="goUrl('/pages/product/search')">
				<image src="/static/index/ic_searchbai.png" class="icon"></image>

				<view class="search-text">搜索商品</view>
			</view>

			<view class="hot-search flex items-center justify-between">
				<view class="title">热搜：</view>
				<view class="items flex items-center flex-1">
					<view class="item" v-for="(item, index) in info.search" :key="index" @click="goUrl('/pages/product/product-list?keyword=' + item)">
						{{ item }}
					</view>
				</view>
			</view>

			<view class="banner">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
					<swiper-item style="width: 100%" class="swiper_item" v-for="(item, index) in info.carousel" :key="index">
						<image :src="imgUrl + item.images" style="width: 100%" v-if="item.type == 1"></image>
						<video v-else style="width: 100%" :src="imgUrl + item.video"></video>
					</swiper-item>
				</swiper>
			</view>

			<view class="cate mz-30">
				<view
					class="item flex flex-col items-center justify-center"
					v-for="(item, index) in info.cate"
					:key="index"
					@click="goUrl('/pages/product/product-list?cate_1=' + item.id)"
				>
					<image :src="imgUrl + item.icon" class="icon"></image>
					<view class="text">{{ item.title }}</view>
				</view>
			</view>

			<view class="notice-c upgrade-z-index flex items-center mz-30">
				<image src="/static/index/ic_ggaosy.png" class="notice-icon shrink-0"></image>
				<view class="wei-title">平台公告</view>
				<swiper vertical circular :autoplay="true" :interval="3000" :duration="1000" class="notice-l">
					<swiper-item v-for="(item, index) in info.news" :key="index" @click="goUrl('/pages/news/info?id=' + item.id)">
						<view class="notice-i line-1-clamp">{{ item.title }}</view>
					</swiper-item>
				</swiper>
				<view class="more flex items-center" @click="goUrl('/pages/news/index')">
					<image src="/static/index/ic_ggsyjt.png" class="more-icon"></image>
				</view>
			</view>

			<view class="type-c" v-if="info.type?.length == 3">
				<view class="p-4 bg-white">
					<up-box height="362rpx" gap="14rpx" :bgColors="['#fff', '#fff', 'fff']">
						<template #left>
							<view class="left flex-1" @click="goUrl(`${info.type?info.type[0].url:''}`)">
								<image src="/static/index/bg_xfeizqu.png" class="bg"></image>
								<view class="info">
									<view class="t color1">{{ info.type ? info.type[0].title : '' }}</view>
									<view class="desc color1">{{ info.type ? info.type[0].describe : '' }}</view>
									<view class="buy color1 flex items-center justify-between">
										<text>立即购买</text>
										<up-icon name="arrow-right" size="13" class="icon" color="#941399"></up-icon>
									</view>
								</view>
							</view>
						</template>
						<template #rightTop>
							<view class="rightTop flex-1" @click="goUrl(`${info.type?info.type[1].url:''}`)">
								>
								<image src="/static/index/bg_fugzqu.png" class="bg"></image>
								<view class="info">
									<view class="t color2">{{ info.type ? info.type[1].title : '' }}</view>
									<view class="desc color2">{{ info.type ? info.type[1].describe : '' }}</view>
									<view class="buy color2 flex items-center justify-between">
										<text>立即购买</text>
										<up-icon name="arrow-right" size="13" class="icon" color="#B70E18"></up-icon>
									</view>
								</view>
							</view>
						</template>
						<template #rightBottom>
							<view class="rightBottom flex-1" @click="goUrl(`${info.type?info.type[2].url:''}`)">
								>
								<image src="/static/index/bg_zhekzqu.png" class="bg"></image>
								<view class="info">
									<view class="t color3">{{ info.type ? info.type[2].title : '' }}</view>
									<view class="desc color3">{{ info.type ? info.type[2].describe : '' }}</view>
									<view class="buy color3 flex items-center justify-between">
										<text>立即购买</text>
										<up-icon name="arrow-right" size="13" class="icon" color="#9D5C0E"></up-icon>
									</view>
								</view>
							</view>
						</template>
					</up-box>
				</view>
			</view>
			
			<view class="type-c" v-if="info.type?.length == 2">
				<view class="p-4 bg-white flex items-center" style="gap: 14rpx;">
					<view class="rightTop flex-1" @click="goUrl(`${info.type?info.type[0].url:''}`)">>
						<image src="/static/index/bg_fugzqu.png" class="bg"></image>
						<view class="info">
							<view class="t color2">{{ info.type ? info.type[0].title : '' }}</view>
							<view class="desc color2">{{ info.type ? info.type[0].describe : '' }}</view>
							<view class="buy color2 flex items-center justify-between">
								<text>立即购买</text>
								<up-icon name="arrow-right" size="13" class="icon" color="#B70E18"></up-icon>
							</view>
						</view>
					</view>
					
					<view class="rightBottom flex-1" @click="goUrl(`${info.type?info.type[1].url:''}`)">>
						<image src="/static/index/bg_zhekzqu.png" class="bg"></image>
						<view class="info">
							<view class="t color3">{{ info.type ? info.type[1].title : '' }}</view>
							<view class="desc color3">{{ info.type ? info.type[1].describe : '' }}</view>
							<view class="buy color3 flex items-center justify-between">
								<text>立即购买</text>
								<up-icon name="arrow-right" size="13" class="icon" color="#9D5C0E"></up-icon>
							</view>
						</view>
					</view>
				
				</view>
			</view>
		</view>

		<view class="product-title flex items-center flex-col justify-between">
			<view class="top flex items-center justify-center">
				<image :src="theme?.bg?.icon_bk_left" class="icon"></image>
				<view class="val">爆款推荐</view>
				<image :src="theme?.bg?.icon_bk_right" class="icon"></image>
			</view>
			<view class="desc">爆款好物，值得推荐</view>
		</view>

		<Porduct :obj="{ pick: 1 }" />
	</view>
</template>

<script setup>
	import { ref, inject, nextTick } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading } from '/service/port';
	import { onReachBottom, onPullDownRefresh, onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import Porduct from '/components/Product.vue';
	import { useTitleStore } from '@/stores/title';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	

	const topH = ref(15);
	const searchr = ref(15);
	const parent_code = ref('');

	const timeData = ref({});

	// 定义 onChange 方法
	const onChange = (e) => {
		timeData.value = e;
	};

	onShow(() => {
		// #ifdef MP-WEIXIN
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top;
		searchr.value = menuInfo.width + 25;
		// #endif

		getIndex();
	
	});

	onLoad((e) => {
		uni.setNavigationBarTitle({
			title: useTitleStore().globalTitle
		});
		// #ifdef H5
		if (e.token) {
			uni.setStorageSync('token', e.token);
		}
		//  #endif

		// #ifdef MP-WEIXIN
		const scene = decodeURIComponent(e.scene || '');
		if (scene) {
			parent_code.value = scene;
			uni.setStorageSync('parent_code', parent_code.value);
		}

		// 监听分享给好友
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});

		//  #endif
	});

	const info = ref({});

	async function getIndex() {
		let res = await port('getIndexInfo');

		info.value = res.data;
	}

	// #ifdef MP-WEIXIN
	onShareAppMessage(() => {});

	onShareTimeline(() => {});
	//  #endif
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.kill {
		background: #ffffff;
		border-radius: 30rpx;
		position: relative;
		padding: 25rpx 30rpx;
		margin-top: 26rpx;
		.bg-icon {
			position: absolute;
			width: 100%;
			height: 73rpx;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.coundown {
			@include flex;
			align-items: center;

			&__custom {
				margin-top: 4px;
				width: 20px;
				height: 20px;
				background-color: #fb3204;
				border-radius: 4px;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;

				&__item {
					color: #fff;
					font-size: 12px;
					text-align: center;
				}
			}

			&__doc {
				color: #fb3204;
				padding: 0px 2px;
			}

			&__item {
				color: #606266;
				font-size: 15px;
				margin-right: 4px;
			}
		}

		.pro-box {
			padding-top: 20rpx;
			.box {
				position: relative;
				.item {
					> image {
						width: 156rpx;
						height: 156rpx;
						border-radius: 18rpx;
					}
					.price {
						font-size: 26rpx;
						color: #f81a2e;
					}
					.desc {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						text-decoration-line: line-through;
					}
				}
				.sold_out {
					position: absolute;
					top: 0;
					left: 0;
					width: 156rpx;
					height: 156rpx;
				}

				.filter {
					filter: grayscale(100%);
				}
			}
		}

		.titles {
			position: relative;
			.val {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
			.more {
				color: #999999;
				font-size: 26rpx;
				text-align: right;
			}
			.times {
				margin-left: 15rpx;
				background: #ffdfe2;
				border-radius: 18rpx;
				position: relative;
				padding: 2rpx 15rpx 2rpx 0;
				margin-top: 3rpx;
				.c-icon {
					width: 102rpx;
					height: 36rpx;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					z-index: 0;
				}
				.text {
					position: relative;
					font-weight: 400;
					font-size: 22rpx;
					color: #ffffff;
					margin-left: 15rpx;
				}
				.coundown {
					font-weight: 500;
					font-size: 24rpx;
					color: #f81a2e;
					margin-left: 30rpx;
				}
			}
		}
	}

	.product-title {
		margin: 30rpx 0;
		.top {
			.icon {
				width: 44rpx;
				height: 36rpx;
			}
			.val {
				margin: 0 23rpx;
				margin-top: 3rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
				background: $theme-bk-bg-color;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.desc {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-top: 15rpx;
		}
	}

	.gradient {
		background: #ffffff;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		padding-bottom: 30rpx;
	}

	.top-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 474rpx;
		z-index: 0;
	}

	.container {
		padding-bottom: 120rpx;
		.search {
			background: rgb(255, 255, 255, 0.3);
			border-radius: 36rpx;
			position: relative;
			z-index: 1;
			height: 72rpx;
			line-height: 72rpx;
			.icon {
				width: 34rpx;
				height: 34rpx;
				margin-left: 24rpx;
			}
			.search-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				margin-left: 19rpx;
				opacity: 0.6;
			}
		}

		.hot-search {
			position: relative;
			z-index: 1;
			margin: 16rpx 30rpx 0 30rpx;
			.title {
				font-weight: 400;
				font-size: 22rpx;
				color: #ffffff;
			}
			.items {
				gap: 8rpx;
				overflow-x: scroll;
				white-space: nowrap;
				.item {
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
					background: rgb(255, 255, 255, 0.3);
					border-radius: 17rpx;
					padding: 5rpx 12rpx;
				}
			}
		}

		.banner {
			margin: 22rpx 30rpx;

			height: 328rpx;
			border-radius: 18rpx;

			.swiper {
				height: 328rpx;
				border-radius: 18rpx;
			}

			::v-deep .swiper .uni-swiper-dots-horizontal {
				bottom: 16rpx;
			}

			::v-deep .swiper .uni-swiper-dot {
				width: 6rpx;
				height: 6rpx;
				border-radius: 6rpx;
				background: rgb(255, 255, 255, 0.6);
				opacity: 0.5;
				margin-right: 6rpx;
			}

			::v-deep .swiper .uni-swiper-dot-active {
				background: #ffffff;
				opacity: 1;
				width: 12rpx;
			}

			.swiper_item {
				width: 100%;
				height: 328rpx !important;
				border-radius: 18rpx;
				> image {
					height: 328rpx;
					border-radius: 18rpx;
				}

				> video {
					height: 328rpx;
					border-radius: 18rpx;
				}
			}
		}

		.cate {
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 30rpx;

			.item {
				.icon {
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}
				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-top: 8rpx;
				}
			}
		}

		.notice-c {
			padding: 15rpx 22rpx;
			background: #fff3e6;
			border-radius: 14rpx;
			.notice-icon {
				width: 35rpx;
				height: 28rpx;
				margin-top: -3rpx;
			}
			.notice-l {
				margin: 0 40rpx 0 17rpx;
				height: 40rpx;
				flex: 1;
				.notice-i {
					font-weight: 400;
					font-size: 26rpx;
					color: #9b7958;
				}
			}
			.wei-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				background: linear-gradient(180deg, #9a7758 0%, #b0915e 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-left: 12rpx;
				margin-top: -3rpx;
			}
			.more {
				.more-icon {
					width: 11rpx;
					height: 19rpx;
				}
			}
		}
		.type-c {
			margin: 26rpx 30rpx 0 30rpx;

			.info {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				// width: 100%;
				.t {
					font-weight: 500;
					font-size: 30rpx;
				}
				.desc {
					font-weight: 400;
					font-size: 20rpx;
					padding: 10rpx 0 15rpx 0;
				}
				.buy {
					font-weight: 400;
					font-size: 24rpx;
					background: #ffffff;
					opacity: 0.7;
					border-radius: 21rpx;
					width: 125rpx;
					text-align: center;
					padding: 3rpx 10rpx 5rpx 10rpx;
					.icon {
						margin-top: 5rpx;
					}
				}
				.color1 {
					color: #941399;
				}
				.color2 {
					color: #b70e18;
				}
				.color3 {
					color: #9d5c0e;
				}
			}

			.left {
				position: relative;
				width: 100%;
				height: 362rpx;
				.bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
			.rightTop {
				position: relative;
				width: 100%;
				height: 174rpx;
				.bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
			.rightBottom {
				position: relative;
				width: 100%;
				height: 174rpx;
				.bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
